<template>
  <view v-if="detailInfo" class="safety-150 px-32rpx pt-24rpx min-h-100vh bg-#ffffff">
    <mt-navbar title="活动详情"> </mt-navbar>
    <view class="relative h-400rpx mb-40rpx">
      <uv-swiper
        :list="detailInfo.coverFile"
        key-name="url"
        indicator-style="right: 20rpx"
        :autoplay="false"
        circular
        height="400rpx"
        @change="(e) => (swiperCurrent = e.current)"
      >
        <!-- <template #indicator>
          <view class="bg-[rgba(0,0,0,0.55)] px-18rpx pb-8rpx rd-30rpx">
            <text class="text-24rpx text-#ffffff line-height-24rpx">{{ swiperCurrent + 1 }}/{{ detailInfo.coverFile.length }}</text>
          </view>
        </template> -->
      </uv-swiper>
      <view
        v-if="detailInfo.orderStatus === 4 && detailInfo.contentStatus === 1"
        class="bg-#007BFF absolute right-0 top-0 px-24rpx py-16rpx text-28rpx text-#ffffff z-2"
        style="border-radius: 0 0 0 40rpx"
      >
        待上传内容
      </view>
      <view
        v-if="detailInfo.orderStatus === 4 && detailInfo.contentStatus !== 1"
        class="bg-#28B094 absolute right-0 top-0 px-24rpx py-16rpx text-28rpx text-#ffffff z-2"
        style="border-radius: 0 0 0 40rpx"
      >
        报名成功
      </view>
      <view
        v-if="detailInfo.orderStatus === 1"
        class="bg-#F94B4A absolute right-0 top-0 px-24rpx py-16rpx text-28rpx text-#ffffff z-2"
        style="border-radius: 0 0 0 40rpx"
      >
        取消成功
      </view>
    </view>
    <view class="text-40rpx text-#1C213E font-bold mb-32rpx">{{ detailInfo.activityName }}</view>
    <view class="flex items-start mb-24rpx">
      <image class="w-32rpx h-32rpx mr-16rpx" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-activity3.svg"></image>
      <view class="flex-1 min-w-0">
        <view class="text-24rpx text-#727687">活动主题</view>
        <view class="text-28rpx text-#1C213E">{{ detailInfo.activityType }}</view>
      </view>
    </view>
    <view class="flex items-start mb-24rpx">
      <image class="w-32rpx h-32rpx mr-16rpx" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-activity4.svg"></image>
      <view class="flex-1 min-w-0">
        <view class="text-24rpx text-#727687">活动时间</view>
        <view class="text-28rpx text-#1C213E"
          >{{ dayjs(detailInfo.startTime).format('YYYY-MM-DD HH:mm') }} - {{ dayjs(detailInfo.endTime).format('YYYY-MM-DD HH:mm') }}</view
        >
      </view>
    </view>
    <view class="flex items-start mb-24rpx">
      <image class="w-32rpx h-32rpx mr-16rpx" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-activity7.png"></image>
      <view class="flex-1 min-w-0">
        <view class="text-24rpx text-#727687">报名截止时间</view>
        <view class="text-28rpx text-#1C213E">{{ dayjs(detailInfo.serviceProviderDeadline).format('YYYY-MM-DD HH:mm') }}</view>
      </view>
    </view>
    <view v-if="detailInfo.addressShowStatus === 1" class="flex items-start mb-24rpx">
      <image class="w-32rpx h-32rpx mr-16rpx" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-activity6.svg"></image>
      <view class="flex-1 min-w-0">
        <view class="text-24rpx text-#727687">地址</view>
        <view class="text-28rpx text-#1C213E">{{ detailInfo.province }}{{ detailInfo.city }}{{ detailInfo.address }}</view>
      </view>
    </view>
    <view class="flex items-center justify-between mb-60rpx">
      <view class="text-40rpx text-#1484EE font-bold"
        >{{ detailInfo.orderStatus === 1 ? '已退款' : '已付' }}￥{{ amountTransfer(detailInfo.rightsAmount) }}</view
      >
      <view v-if="detailInfo.recentSignUpList?.length" class="flex items-center">
        <view class="text-24rpx text-#ADB0BD" :style="{ 'margin-right': detailInfo.recentSignUpList.length * 30 + 24 + 'rpx' }"
          >近期{{ detailInfo.recentSignUpList.length }}人报名</view
        >
        <view class="relative h-40rpx">
          <image
            v-for="(item, index) in detailInfo.recentSignUpList.slice(0, 6)"
            :key="item.id"
            class="circle"
            :style="{ right: index * 30 + 'rpx', 'z-index': 6 - index }"
            :src="item.avatarUrl ? item.avatarUrl : 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/default_avatar.png'"
          ></image>
        </view>
      </view>
    </view>
    <view class="text-32rpx text-#1C213E font-bold mb-24rpx">活动描述</view>
    <view class="text-28rpx text-#727687">{{ detailInfo.remark }}</view>
    <view class="text-32rpx text-#1C213E font-bold mb-24rpx mt-60rpx">日程安排</view>
    <view v-if="detailInfo.scheduleFile" class="mb-14rpx">
      <image v-for="(item, index) in detailInfo.scheduleFile" :key="index" class="w-full h-auto mb-10rpx" mode="widthFix" :src="item.url"></image>
    </view>

    <view class="flex items-center justify-between px-32rpx fixed h-116rpx left-0 right-0 bottom-0 bg-#ffffff safety-2">
      <mt-button class="flex-1" :shake="false" @click="goSign"> 查看权益 </mt-button>
    </view>
  </view>
</template>

<script setup>
import { activitygetMySignUpDetailByServiceProvider } from '@/subActivity/api/index';
import { amountTransfer } from '@/utils/tools';
import dayjs from 'dayjs';

function goSign() {
  const activityRightsList = detailInfo.value.activityRightsList.filter((son) => son.id !== detailInfo.value.rightsId);
  const myPayList = detailInfo.value.activityRightsList.find((son) => son.id === detailInfo.value.rightsId);
  uni.setStorageSync('interests', {
    activityRightsList: activityRightsList,
    myPayList: [myPayList]
  });

  uni.navigateTo({
    url: `/subActivity/pages/serviceSign?id=${detailInfo.value.id}&type=2`
  });
}

const swiperCurrent = ref(0);
const detailInfo = ref(null);
function getDetail() {
  activitygetMySignUpDetailByServiceProvider({ id: id.value, rightsId: rightsId.value, orderStatus: orderStatus.value }).then((res) => {
    const obj = res.data;
    obj.warningTime = handleTime(obj.serviceProviderDeadline);
    if (obj.recentSignUpList?.length) {
      obj.recentSignUpList.reverse();
    }

    detailInfo.value = obj;
  });
}

function handleTime(endtime) {
  const obj = {
    endtime,
    d: 0,
    h: 0,
    m: 0,
    s: 0
  };

  const targetDate = new Date(endtime).getTime();
  const now = new Date().getTime();

  if (now > targetDate) {
    return obj;
  }

  const timeDifference = targetDate - now;

  obj.d = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
  obj.h = Math.floor((timeDifference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  obj.m = Math.floor((timeDifference % (1000 * 60 * 60)) / (1000 * 60));
  obj.s = Math.floor((timeDifference % (1000 * 60)) / 1000);

  return obj;
}

const id = ref('');
const rightsId = ref('');
const orderStatus = ref('');
onLoad((options) => {
  id.value = options.id;
  rightsId.value = options.rightsId;
  orderStatus.value = options.orderStatus ? Number(options.orderStatus) : null;
  getDetail();
});
</script>

<style lang="scss" scoped>
.circle {
  position: absolute;
  top: 0;
  width: 40rpx;
  height: 40rpx;
  background-color: #ffffff;
  border: 2rpx solid #e6e6e6;
  border-radius: 80rpx;
}
</style>
